<template>
  <svg :style="iconStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: 'icon'
    },
    iconStyle: {
      type: Object,
      default: () => ({ width: '100px', height: '100px' })
    }
  },
  computed: {
    symbolId() {
      return `#${this.prefix}-${this.name}`
    }
  }
}
</script>
